<template>
  <div class="byt-custom-table">
    <t-table
      v-model:columnControllerVisible="columnController.visible"
      :column-controller="columnControllerConfig"
      bordered
      :row-key="rowKey"
      height="100%"
      :data="tableData"
      :columns="columns"
      :show-header="showHeader"
      :foot-data="footData"
      :drag-sort="dragSort"
      hover
      :rowspan-and-colspan-in-footer="rowspanAndColspanInFooter"
      :loading="loading"
      :size="size"
      :loading-props="{ indicator: true, text: '加载中...' }"
      :max-height="maxHeight"
      @select-change="onSelectChange"
      @drag-sort="onDragSort"
    >
      <template v-for="slot in Object.keys(slots)" #[slot]="scope">
        <slot :name="slot" v-bind="scope" />
      </template>
    </t-table>
    <div v-if="isPage" class="pagination">
      <t-pagination
        :current="page.current"
        :page-size="page.pageSize"
        :total="page.total"
        :page-size-options="pageSizeOptions"
        show-jumper
        @current-change="onCurrentChange"
        @page-size-change="onPageSizeChange"
      />
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, useSlots } from 'vue';
defineProps({
  showHeader: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'small'
  },
  maxHeight: {
    type: [Number, String],
    default: ''
  },
  rowKey: {
    type: String,
    default: 'index'
  },
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  isPage: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  page: {
    type: Object,
    default: () => ({
      current: 1,
      total: 0,
      pageSize: 20
    })
  },
  pageSizeOptions: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  footData: {
    type: Array,
    default: () => []
  },
  rowspanAndColspanInFooter: {
    type: Function,
    default: undefined
  },
  // 控制列显示隐藏组件
  columnController: {
    type: Object,
    default: () => ({
      visible: false
    })
  },
  // 自定义显示列控制器，值为空不会显示
  columnControllerConfig: {
    type: Object,
    default: () => {}
  },
  // 启用行/列拖拽
  dragSort: {
    type: String,
    default: ''
  }
});
const slots = useSlots();
const emit = defineEmits([
  'tag-current-change',
  'tag-page-size-change',
  'tag-select-change',
  'tag-drag-sort'
]);

function onSelectChange(val, { selectedRowData }) {
  emit('tag-select-change', selectedRowData);
}
function onCurrentChange(val) {
  emit('tag-current-change', val);
}
function onPageSizeChange(val) {
  emit('tag-page-size-change', val);
}
function onDragSort(params) {
  emit('tag-drag-sort', params);
}
</script>
<style lang="scss" scoped>
.byt-custom-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .pagination {
    margin-top: 16px;
  }
}

:deep(.t-table) {
  height: 100%;
  overflow: hidden;
  table {
    border-collapse: separate;
  }
  .t-table--layout-fixed:has(.t-table__empty) {
    height: 100%;
  }
}
</style>
